<template>
	<view>
		<my-search :bgColor="'blue'" :radius="18" @myClick="goSearch"></my-search>
		<view class="cate">
			<scroll-view class="leftScroll" scroll-y="true" :style="{height:windowHeight+'px'}">
				<block v-for="(item,i) in cateList" :key="i">
					<view :class="['leftItem',i === active ? 'active':' ']" @click="activeChanged(i)">{{item.cat_name}}</view>
				</block>
			</scroll-view>
			<scroll-view class="rightScroll" scroll-y="true" :style="{height:windowHeight+'px'}" :scroll-top="scrollTop">
				<view class="rightBlock rightActive" v-for="(item,i2) in twoCateList" :key="i2">
					<view class="right-title">/{{item.cat_name}}/</view>
					<view class="rightList">
						<view class="rightItemClass" v-for="(item,index) in item.children" :key="index" @click="gotoDetail(item)">
							<image class="image" :src="item.cat_icon"></image>
							<view class="name">{{item.cat_name}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				"windowHeight":0,
				"cateList":[],
				"active":0,
				"twoCateList":[],//二级分类的列表
				"scrollTop": 0
			};
		},
		onLoad() {
			this.getCateList()	
			const syninfo = uni.getSystemInfoSync()
			console.log(syninfo)
			this.windowHeight = syninfo.windowHeight - 50
		},
		methods:{
			async getCateList(){
				const {data:res} = await uni.$http.get('/categories')
				if(res.meta.status !== 200){return uni.$showErrMsg()}
				console.log(res)
				this.cateList = res.message
				//二级分类赋值
				this.twoCateList = this.cateList[this.active].children
				console.log('twoCateList:',this.twoCateList)
			},
			activeChanged(index){
				console.log(index)
				this.active = index
				//重新为二级分类赋值
				this.twoCateList = this.cateList[index].children
			    this.scrollTop = this.scrollTop === 0 ? 1 : 0
			},
			gotoDetail(item){
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list?cid='+item.cat_id
				})
			},
			goSearch(){
				uni.navigateTo({
					url:'/subpkg/search/search'
				})
			}
		}
	}
</script>

<style lang="scss">	
	.cate{
		display: flex;
		// position: fixed;
		.leftScroll{
			width: 300rpx;
			.leftItem{
				background: $uni-bg-color-grey;
				font-size: 30rpx;
				line-height: 120rpx;
				text-align: center;
				position: relative;
				&.active{
					background: #fff;
					&::before{
						content: '   ';
						display: block;
						background: #B10004;
						width: 4px;
						height: 30px;
						position: absolute;
						top: 50%;
						left: 0;
						transform: translateY(-50%);
					}
				}
				// .lineView{ 
				// 	background: #B10004;
				// 	width: 4px;
				// 	height: 30px;
				// 	// vertical-align: middle;
				// 	position: absolute;
				// 	top: 50%;
				// 	left: 0;
				// 	transform: translateY(-50%);
				// }
			}
		}
		
		.rightScroll{
			overflow:auto;
			width: 550rpx;
			.rightBlock{
				padding: 10rpx;
				.right-title{
					margin: auto;
					text-align: center;
					font-size: 15px;
					font-weight: bold;
					padding: 15px 0;
				}
				.rightList{
					display: flex;
					flex-wrap: wrap;
					.rightItemClass{
						display: flex;
						flex-wrap: wrap;
						flex-direction: column;
						justify-content: center;
						width: 33.33%;
						margin-bottom: 10px;
						.image{
							width: 60px;
							height: 60px;
						}
						.name{
							font-size: 12px;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>
